<template>
    <div class="main">

        <div class="inform1">
            <span>
                <span>￥{{ Hotellistxx.jiaqian }}</span>起/人 &nbsp;
                儿童价格 <span>￥{{ Hotellistxx.youhui }}</span>起/人
            </span>
        </div>
        <div class="inform2">
            <p> <img src="https://s.qunarzz.com/vacation_list_rn/list/star_3_v3.png" alt="">
                {{ Hotellistxx.title }}</p>
        </div>
        <div class="inform3">
            <van-tag plain type="warning">现金红包</van-tag>
            <van-tag plain type="warning">专项红包</van-tag>
            <van-tag plain type="warning">优惠促销</van-tag>
            <van-icon name="ellipsis" />
        </div>
        <div class="inform4">
            <van-tag plain type="danger">早订优惠</van-tag>
            提前30天预订，立减100元
            <van-icon name="ellipsis" />
        </div>
        <div class="inform5">
            <van-icon name="passed" color="#53E1D3" />豪华游
            <van-icon name="passed" color="#53E1D3" />接送机
            <van-icon name="passed" color="#53E1D3" />出行保障
            <van-icon name="ellipsis" />
        </div>
        <div class="inform6">
            <div> <img src="https://s.qunarzz.com/vacation_react/detail/customize_label.png" alt="">
                天数、行程、内容、奢简可调整
                <van-button round type="info" size="mini" color="#53E1D3">去定制</van-button>
            </div>
        </div>

    </div>
</template>

<script>
import { HotelChoose } from '@/api/guo/ferrMain'
export default {
    data() {
        return {

            Hotellistxx: [],
        };
    },
    mounted() {
        this.HotelChooseapi()
    },
    methods: {
        async HotelChooseapi() {//上半部分图标
            let { data } = await HotelChoose()
            let b = this.$route.params.id
            console.log("b", b)
            console.log("data", data)

            for (let i = 0; i < data.length; i++) {
                if (data[i].id == b) {
                    this.Hotellistxx = data[i]
                    // console.log("this.Hotellistxx", this.Hotellistxx)
                    break
                }



            }
        },
    }
}
</script>

<style scoped lang="scss">
.main {
    padding: 0px 10px 0px 10px;

    .van-icon-ellipsis {
        float: right;
        font-size: 14px;
    }
}

.inform1 {
    height: 36px;
    // background-color: aqua;
    border-radius: 15px 15px 0 0;

    span {
        font-size: 12px;
        line-height: 45px;

        span {
            color: coral;
        }

        span:nth-child(1) {
            font-size: 16px;
        }


    }
}

.inform2 {
    font-size: 16px;
    margin: 10px 0px 10px 0px;

    img {
        width: 25px;
        display: inline;
    }
}

.inform3 {
    height: 35px;
    line-height: 35px;

    .van-tag {
        margin-left: 10px;
    }
}

.inform4 {
    height: 35px;
    line-height: 35px;

    .van-tag {
        margin-left: 10px;
    }
}

.inform5 {
    height: 35px;
    line-height: 35px;


}

.inform6 {
    height: 35px;
    line-height: 35px;

    div {
        img {
            width: 35px;
        }

        .van-button {
            float: right;
        }
    }

}
</style>